@extends('app.layouts.default');
@section('main')
    <div class="container">
        <div class="row">
            <div class="col-xs-12">

                <div class="slider-wrapper theme-new">
                    <div id="slider" class="nivoSlider" style="height: 285px">
                        @foreach($carousel as $i)
                            <img style="display: none; width: 980px; height: 285px; " src="{{ $i->path() }}">
                        @endforeach
                    </div>
                    <div id="htmlcaption" class="nivo-html-caption">
                        <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- ./carousel -->
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <dl class="Column Column--left">
                    <dt class="Column-header">
                        <span class="Column-headerCaption">关于公司 About</span>
                        <a class="Column-headerMore" href="#"></a>
                    </dt>
                    <dd class="Column-body">
                        {!!  $about->content !!}
                    </dd>
                </dl>
                {{--./about--}}
                <dl class="Column Column--center">
                    <dt class="Column-header">
                        <span class="Column-headerCaption">新闻动态 News</span>
                        <a class="Column-headerMore"></a>
                    </dt>
                    <dd class="Column-body">
                        <ul class="IndexNews">
                            @foreach($news as $i)
                                <li class="IndexNews-item"><a href="" class="IndexNews-itemTitle">{{ $i->title }}</a>
                                    <span class="IndexNews-itemDate">{{ $i->created_at->format('Y-m-d') }}</span>
                                </li>
                            @endforeach
                        </ul>
                    </dd>
                </dl>
                {{--./news--}}
                <dl class="Column Column--right">
                    <dt class="Column-header">
                        <span class="Column-headerCaption">联系方式 Contact</span>
                        <a class="Column-headerMore"></a>
                    </dt>
                    <dd class="Column-body">
                        {!! $contact->content !!}
                    </dd>
                </dl>
                {{--./contact --}}
            </div>
        </div>
        <!-- ./row -->
        <div class="row">
            <div class="col-xs-12">
                <dl class="Column Column--left">
                    <dt class="Column-header">
                        <span class="Column-headerCaption">人才招聘 Hiring</span>
                        <a class="Column-headerMore"></a>
                    </dt>
                    <dd class="Column-body">
                        {!! $hiring->content !!}
                    </dd>
                </dl>
                <!-- ./hiring -->
                <dl class="Column Column--center">
                    <dt class="Column-header">
                        <span class="Column-headerCaption">员工风采 Staff presence</span>
                        <a class="Column-headerMore"></a>
                    </dt>
                    <dd class="Column-body">
                        <ul id="gallery">
                            @foreach( $staffStyle as $i)
                                <li><img src="{{ \App\Models\Upload::find($i->image)->path() }}"
                                         data-frame="{{ \App\Models\Upload::find($i->image)->path() }}?s=30" alt="">
                                </li>
                            @endforeach
                        </ul>
                    </dd>
                </dl>
                <!-- ./staff-presence -->

                <dl class="Column Column--right">
                    <dt class="Column-header">
                        <span class="Column-headerCaption">公司公告 Notice</span>
                        <a class="Column-headerMore"></a>
                    </dt>
                    <dd class="Column-body">
                        <div class="js-display-cycle">
                            {!! $notice->content !!}
                        </div>
                    </dd>
                </dl>
                {{--./notice--}}

            </div>
        </div>
        <!-- ./row -->
        <div class="row">
            <div class="col-xs-12">
                <dl class="Column">
                    <dt class="Column-header">
                        <span class="Column-headerCaption">产品展示 Product</span>
                        <span class="Column-headerMore"></span>
                    </dt>
                    <dd class="Column-body">
                        <ul class="IndexProduct">
                            @foreach($products as $key => $items)
                                <li class="IndexProduct-item js-product-active {{ $items === $products->first() ? 'IndexProduct-item--active' : '' }}">{{ $key }}
                                    <div class="IndexProduct-itemContent">
                                        @foreach($items as $i)
                                            <figure class="IndexProduct-product">
                                                <img class="IndexProduct-productImg"
                                                     src="{{ \App\Models\Upload::find($i->image)->path() }}?s=100"
                                                     alt="">
                                                <figcaption
                                                        class="IndexProduct-productCaption">{{ $i->name }}</figcaption>
                                            </figure>
                                        @endforeach
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </dd>
                </dl>
                {{--./product--}}
            </div>
        </div>
        <!-- ./row -->
    </div>

@section('css')
    @parent
    <link rel="stylesheet" href="/app/css/index.css">
    <link rel="stylesheet" href="/plugins/nivo-slider/nivo-slider.css">
    <link rel="stylesheet" href="/plugins/nivo-slider/themes/new/new.css">
    <link rel="stylesheet" href="/plugins/gallery-view/css/jquery.galleryview-3.0-dev.css">
@stop
@section('js')
    @parent
    <script src="/app/js/index.js"></script>
    <script src="/plugins/nivo-slider/jquery.nivo.slider.js"></script>
    <script src="/plugins/gallery-view/js/jquery.galleryview-3.0-dev.js"></script>
    <script src="/plugins/gallery-view/js/jquery.easing.1.3.js"></script>
    <script src="/plugins/gallery-view/js/jquery.timers-1.2.js"></script>
    <script>
        $(function () {
            $("#slider").nivoSlider({
                effect: 'random',   // Specify sets like: 'fold,fade,sliceDown' 动画效果
                controlNav: true,  // 是否显示 controlNav
                pauseTime: 3000,        // 图片停留时间
                directionNav: true,   // 是否显示“上一个”和“下一个”导航
                controlNav: false     // 是否显示导航控制
            });
        });

        $('#gallery').galleryView({
            panel_width: 453,
            panel_height: 215,
            autoplay: true,
            show_filmstrip: false
        });
    </script>
@stop
@stop